import React, { Fragment } from 'react';

// 在React中, 生命周期函数指的是组件在某一时刻会自动执行的函数 

class Counter extends React.Component {
    // 类的生命周期函数
    constructor(props) {
        super(props);
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.state = {
            counter: 0
        }
    }
    handleBtnClick() {
        const newCounter = this.state.counter + 1;
        // setState 是异步的
        // this.setState({
        //     counter: newCounter
        // })
        this.setState(() => {
            return {
                counter: newCounter
            }
        }, () => {
            // 前面的代码执行完毕才执行这个
            console.log(this.divElem.innerHTML);
        })
    }
    // 挂载前自动执行
    componentWillMount() {
        console.log('componentWillMount')
    }

    // 渲染时自动执行
    // 初始化,render函数首次执行
    // 当数据发生变化时,render函数会被自动执行
    render() {
        console.log('render')
        // ref 写在html标签上，获取的是dom节点
        // ref 写在组件标签上，获取的是组件的js实例 
        const end=this.props.match.params.end;
        return (
            <Fragment>
                <h2>我是counter组件</h2>
                <button
                    onClick={this.handleBtnClick}
                    ref={(button) => { this.buttonElem = button }}>
                    增加
            </button>
                <div
                    ref={(div) => { this.divElem = div }}>
                    {this.state.counter}
                </div>
                <p>{end}</p>
            </Fragment >
        )
    }
    // 挂载后自动执行
    componentDidMount() {
        console.log('componentDidMount')
    }
    // 子组件接收的Props改变时触发
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps')
    }

    // 更新前 自动执行，返回true或者false
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true;
    }

    // 组件更新前 shouldComponentUpdate更新之后
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }

    // 组件更新前 render更新之后
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }

    // 组件即将被销毁(组件从页面中移除前)
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

}
export default Counter;